Table Football

Novice
Scratch
PDF

Community Contributed Project

This project was generously contributed by Mark Hardisty (idea, art, and original design) and Andy Lulham (editing and formatting as a Code Club project).

If you’d like to contribute a project of your own, then get in touch with us on Github.

Introduction

Let’s make a world cup football game in Scratch!

screenshot
screenshot

Step 1: Get the pitch ready for a game

Activity Checklist

  • Start a new project in Scratch.
  • Click on the stage next to the sprite and switch to the Backdrops tab, then click the Upload backdrop from file button and choose the resources/pitch.jpg file.
  • Delete the original blank backdrop, and the cat sprite.
  • Our goals need nets! Create a sprite using the Upload sprite from file button and select resources/net.png. Move the net into the middle of the goal on the left. Rename it blue goal.
  • Right-click on the net sprite and click duplicate, then move this new sprite to the goal on the right and rename it red goal.

Save your project

Step 2: Add a goalie

Okay – our pitch is looking good! Now let’s add some players and get them moving about.

Activity Checklist

  • Click on Upload sprite from file and choose resources/goalie_blue.png. Rename the sprite blue goalie, and drag it near to the left goal.
  • Click on the grow sprite button, and click on the blue goalie sprite 10 times to scale up the sprite.
  • Click on the Scripts tab, and add:

    when FLAG clicked
    go to x: (-190) y: (0)
    forever
        if <<key [q v] pressed?> and <(y position) < [80]>> then
            change y by (5)
        end
        if <<key [a v] pressed?> and <(y position) > [-80]>> then
            change y by (-5)
        end
    end

    Let’s look at the code. We position the goalie, then we loop forever listening for key presses from the player. Q moves the goalie up, A moves it down. We check the y position of the goalie to stop it moving off the screen.

Test your project

Click the green flag.

  • Can you control the goalie by pressing Q and A?
  • What happens when it gets to the edges of the pitch?

Save your project

Step 3: Add some more players

We can’t play a game of football with just one player! We need to add some more.

Activity Checklist

  • Create another sprite using the Upload sprite from file button and selecting resources/goalie_red.png.
  • Change the name of the sprite to red goalie.
  • Drag the sprite on the stage to the right-hand side just in front of the goal.
  • Like before, grow the sprite 10 times so it is as big as the other goalie.
  • Select the blue goalie sprite and drag the script to red goalie to duplicate it.
  • Select red goalie, and modify the script so it looks like this:

    when FLAG clicked
    go to x: (190) y: (0)
    forever
        if <<key [p v] pressed?> and <(y position) < [80]>> then
            change y by (5)
        end
        if <<key [l v] pressed?> and <(y position) > [-80]>> then
            change y by (-5)
        end
    end

    You should only have to change three things: the x position, and which keys are pressed.

Test your project

Click the green flag.

  • Can you control the red goalie by pressing P and L?
  • Do the controls for the blue goalie still work?

Save your project

Step 4: Add some attacking players

Activity Checklist

  • Create another sprite using the Upload sprite from file button and selecting resources/attack_blue.png. Rename the sprite blue attack.
  • As before, grow the sprite 10 times, so the players are as big as the goalies.
  • Move the sprite into the right-hand side of the pitch, so they are attacking the red team’s goal.
  • Drag the script from blue goalie to blue attack, and modify it to match this:

    when FLAG clicked
    go to x: (70) y: (0)
    forever
        if <<key [w v] pressed?> and <(y position) < [80]>> then
            change y by (5)
        end
        if <<key [s v] pressed?> and <(y position) > [-80]>> then
            change y by (-5)
        end
    end
    You should only have to change three things: the x position, and which keys are pressed.
  • Create one more sprite using the Upload sprite from file button and selecting resources/attack_red.png. Rename sprite to red attack.
  • As before, grow the sprite 10 times, so all the players on the pitch are the same size.
  • Move the sprite into the left-hand side of the pitch, so they are attacking the blue team’s goal.
  • Drag the script from blue attack to red attack, and modify it to match this:

    when FLAG clicked
    go to x: (-70) y: (0)
    forever
        if <<key [o v] pressed?> and <(y position) < [80]>> then
            change y by (5)
        end
        if <<key [k v] pressed?> and <(y position) > [-80]>> then
            change y by (-5)
        end
    end

    You should only have to change three things: the x position, and which keys are pressed.

Test your project

Click the green flag.

  • Do you have two teams of working players now? Try pressing Q, A, W and S to control the blue team, and P, L, O and K to control the red team.

Save your project

Step 5: Add a bouncing ball

Our game of football has feet, but no ball! Let’s fix that.

Activity Checklist

  • Click Upload sprite from file
  • Select resources/ball.png, and rename the sprite ball.
  • In the Scripts tab for the ball, add the following:

    when FLAG clicked // bounce about
    broadcast [resetball v]
    forever
        move (10) steps
        if on edge, bounce
    end
  • Right-click on this script and click add comment. Add the comment “bounce about”.
  • Add another script to the ball:

    when I receive [resetball v] // prepare for kick-off
    go to x: (0) y: (0)
    point in direction <pick random (1) to (360)>
    This tells the ball to move to the middle of the pitch for kick-off, and then point in a random direction. Why do we use resetball?
  • Don’t forget to add the “prepare for kick-off” comment, so we remember what this script does!

Test your project

Click the green flag.

  • Does the ball move?
  • What happens when it hits the edges?
  • Are you happy with the ball speed? Try changing the move block to have a smaller or larger number until you’re happy with it.
  • What happens when the ball hits your players?

Save your project

Step 6: Kicking the ball

We need the ball to bounce off the players on the pitch.

  • Modify the last code block you created (“bounce about”) to look like this:

    when FLAG clicked // bounce about
    broadcast [resetball v]
    forever
        move (10) steps
        if on edge, bounce
        if <<touching color [#0A9AF7]?> or <touching color [#FF0D01]?>> then
            turn cw (pick random (140) to (220)) degrees
        end
    end

    You should select the colours by clicking on the football players. This change makes the ball sense it is touching a player, and then bounce off them by turning (with a bit of randomness).

Test your project

Press the green flag.

  • What happens now when the ball hits your players? Is it working for both red and blue players?

Save your project

Step 7: GOOOOOOAAAAAALLLLLLLLL!!!!!!!!

Activity Checklist

  • Select red goal and add the following script:

    when FLAG clicked // goal line technology
    forever
        if <touching [ball v]> then
            broadcast [goal v]
        end
    end
    This is like goal line technology - it runs all the time, checking whether the ball is touching the goal, and broadcasting a message when it is.
  • Drag the script to blue goal to copy it there as well.
  • Now we need to do something when goal is broadcast. Click Upload sprite from file.
  • Select resources/goal_text.png, and rename the sprite goal text.
  • Add this script to goal text:

    when I receive [goal v] // goal scored
    show
    wait (1) secs
    hide
  • Finally, add one more script to goal text:

    when FLAG clicked
    hide

    …to ensure the goal text begins the game hidden.

Save your project

Test your project

You’re ready to play a game! Press the green flag.

  • What happens when the ball goes in?
  • Try challenging a partner to a game!

Challenge 1: Keep score

Can you add variables that will keep track of scores for the red and blue teams?

Challenge 2: Tip the table

You might notice sometimes the ball gets stuck bouncing where the players can’t reach. Can you add a script to the ball to fix this by “tipping the table” when the spacebar is pressed?

Challenge 3: Referee’s whistle

Can you add the sound effect resources/whistle.mp3 so that the whistle sounds whenever a kick-off takes place?